<template>
	<view class="recharge">
		<dwu-integral-navbar title="充值" bgColor="transparent"></dwu-integral-navbar>
		<view class="recharge-title">
			选择充值金额
		</view>
		<view class="money-list">
			<view class="money-item" v-for="(item,index) in pointList" :key="index" :class="current == index ? 'active' : ''" @click="chooseMoney(index)">
				<image v-if="current == index" src="@/static/integral/money_bg.png" mode=""></image>
				<image v-else src="@/static/integral/money_border.png" mode=""></image>
				<text class="number">{{item.money}}元</text>
				<text>{{item.points}}积分</text>
			</view>
			<!-- <view class="money-item" v-for="(item,index) in pointList" :key="index" :class="current == index ? 'active' : ''" @click="chooseMoney(index)">
				<image v-if="current == index" src="@/static/integral/money_bg.png" mode=""></image>
				<image v-else src="@/static/integral/money_border.png" mode=""></image>
				<text class="number">{{item}}元</text>
				<text>{{item * jfmoney}}积分</text>
			</view> -->
			<!-- <view class="money-item" :class="current == 1 ? 'active' : ''" @click="chooseMoney(1)">
				<image v-if="current == 1" src="@/static/integral/money_bg.png" mode=""></image>
				<image v-else src="@/static/integral/money_border.png" mode=""></image>
				<text class="number">5元</text>
				<text>{{1 * jfmoney}}积分</text>
			</view>
			<view class="money-item" :class="current == 2 ? 'active' : ''" @click="chooseMoney(2)">
				<image v-if="current == 2" src="@/static/integral/money_bg.png" mode=""></image>
				<image v-else src="@/static/integral/money_border.png" mode=""></image>
				<text class="number">10元</text>
				<text>{{10 * jfmoney}}积分</text>
			</view>
			<view class="money-item" :class="current == 3 ? 'active' : ''" @click="chooseMoney(3)">
				<image v-if="current == 3" src="@/static/integral/money_bg.png" mode=""></image>
				<image v-else src="@/static/integral/money_border.png" mode=""></image>
				<text class="number">20元</text>
				<text>{{20 * jfmoney}}积分</text>
			</view>
			<view class="money-item" :class="current == 4 ? 'active' : ''" @click="chooseMoney(4)">
				<image v-if="current == 4" src="@/static/integral/money_bg.png" mode=""></image>
				<image v-else src="@/static/integral/money_border.png" mode=""></image>
				<text class="number">50元</text>
				<text>{{50 * jfmoney}}积分</text>
			</view>
			<view class="money-item" :class="current == 5 ? 'active' : ''" @click="chooseMoney(5)">
				<image v-if="current == 5" src="@/static/integral/money_bg.png" mode=""></image>
				<image v-else src="@/static/integral/money_border.png" mode=""></image>
				<text class="number">100元</text>
				<text>{{100 * jfmoney}}积分</text>
			</view> -->
			<view class="money-item" :class="current == 6 ? 'active' : ''" @click="chooseMoney(6)">
				<image v-if="current == 6" src="@/static/integral/money_bg.png" mode=""></image>
				<image v-else src="@/static/integral/money_border.png" mode=""></image>
				<text>自定义积分</text>
			</view>
		</view>
		<view class="recharge-title">
			选择支付方式
		</view>
		<view class="pay-type">
			<view class="left">
				<image src="@/static/integral/wx_icon.png" mode=""></image>
				<text>微信支付</text>
			</view>
			<view class="right" @click="checked = !checked">
				<image v-if="checked" src="@/static/integral/checked.png" mode=""></image>
				<image v-else src="@/static/integral/check.png" mode=""></image>
			</view>
		</view>
		<view class="bottom">
			<view class="tips">
				<view class="title">
					充值提示：
				</view>
				<view class="content">
					<view class="">
						1人民币={{jfmoney}}积分
					</view>
					<view class="">
						本金及赠送金额仅供平台消费，不予退还，充值请慎重。
					</view>
				</view>
			</view>
			<view class="submit" @click="onSubmit">
				<image src="@/static/integral/submit_bg.png" mode=""></image>
				<text>确认购买</text>
			</view>
		</view>
		<customRecharge ref="customRecharge" :jfmoney="jfmoney" @onSubmit="customSubmit"></customRecharge>
	</view>
</template>

<script>
	import customRecharge from './components/custom-recharge'
	export default {
		components: {
			customRecharge
		},
		data() {
			return {
				current: 0,
				checked: true,
				jfmoney: 10,
				pointList: []
				// pointList: [5,10,20,50,100]
			};
		},
		onLoad() {
			this.getJfmoney()
			this.getMoneyPoints()
		},
		methods: {
			chooseMoney(index) {
				if (index == 6) {
					this.$refs.customRecharge.open()
				}
				this.current = index
			},
			getMoneyPoints() {
				this.request.http('/index/getMoneyPoints', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.pointList = data.data
					}
				})
			},
			getJfmoney() {
				this.request.http('/index/jfmoney', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						this.jfmoney = data.data
					}
				})
			},
			onSubmit() {
				if (!this.checked) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				// console.log(this.current);
				// let money = this.pointList[this.current]
				// let jfmoney = money * this.jfmoney
				// this.pay(0,money,jfmoney)
				let money = this.pointList[this.current].money
				let jfmoney = this.pointList[this.current].points
				this.pay(0,money,jfmoney)
			},
			customSubmit(money,jfmoney) {
				this.pay(0,money,jfmoney)
			},
			pay(id,money,points) {
				this.request.http('/Moneyorder/pay', 'post',{
					id,
					money,
					points
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						uni.requestPayment({
							provider: 'payment',
							// orderInfo: data.data.,
							timeStamp: data.data.timeStamp,
							nonceStr: data.data.nonceStr,
							package: data.data.package,
							signType: data.data.signType,
							paySign: data.data.paySign,
							success: (res) => {
								uni.showToast({
									title: '支付成功'
								})
							},
							fail: (err) => {
								console.log(err);
								if (err.errMsg === 'requestPayment:fail cancel') {
									uni.showToast({
										icon: 'none',
										title: '用户取消支付'
									})
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.recharge {
		.recharge-title {
			padding-left: 50rpx;
			padding-top: 23rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #474747;
			line-height: 38rpx;
		}

		.money-list {
			padding: 0 50rpx;
			margin-top: 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.money-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 290rpx;
				height: 110rpx;
				margin-bottom: 22rpx;

				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}

				text {
					position: relative;
					z-index: 10;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 31rpx;
					color: #666666;

					&.number {
						margin-right: 20rpx;
					}
				}

				&.active {
					text {
						color: #FFFFFF;
					}
				}
			}
		}

		.pay-type {
			margin: 22rpx auto 0;
			width: 704rpx;
			height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 42rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 42rpx;
					height: 38rpx;
					margin-right: 22rpx;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #474747;
				}
			}

			.right {
				image {
					width: 32rpx;
					height: 34rpx;
				}
			}
		}
		.bottom {
			padding: 0 64rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			.tips {
				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #666666;
				}
				.content {
					margin-top: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #999999;
					line-height: 33rpx;
				}
			}
			.submit {
				position: relative;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 31rpx;
				color: #B0DD67;
				line-height: 104rpx;
				text-align: center;
				width: 650rpx;
				height: 104rpx;
				margin: 44rpx 0;
				image {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 100%;
				}
				text {
					position: relative;
					z-index: 10;
				}
			}
		}
	}
</style>